<template>
    <view class="container">
        <div class="box">
            <div class="searchbox">
                <img class="image" src="@/static/search.png" alt="">
                <input class="input" type="text" v-model="searchtext" @input="changetext" placeholder="搜索客户公司名称">
            </div>
            <div class="contentbox">
                <div class="choosemsginfo">
                    <span class="blue">客户公司列表</span>
                </div>
                <div v-for="(ele, index) in companylist" :key="index" @click="sure(ele.companyId, ele.companyName)">
                    <div class="personlistitem">
                        <div class="personcheck">
                            <img class="img" src="@/static/company.png" alt="">
                        </div>
                        <div class="personinfo">
                            {{ ele.companyName }}
                        </div>
                    </div>
                    <div class="linebox">
                        <div class="line"></div>
                    </div>
                </div>
            </div>
        </div>
    </view>
</template>
<script setup lang="ts" >
import { getcompanyapi } from '@/api/insureProve'
import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { shake } from '@/utils/util'
import { onMounted, ref } from 'vue';
const ischecked = ref(false)
const changeselect = () => {
    ischecked.value = !ischecked.value
    console.log(ischecked.value);
}
const companylist = ref<any>([])
const type = ref('0')
const searchtext = ref('')
onLoad((e: any) => {
    console.log(e.type)
    type.value = e.type
    getcompany()
})
const getcompany = async () => {
    let res = await getcompanyapi({
        productType: type.value === '0' ? 2 : 3,
        pageSize: pageSize.value,
        pageNum: pageNum.value,
        companyName: searchtext.value
    })
    console.log(res)
    let arr = res.list
    companylist.value = companylist.value.concat(arr)
    hasNextPage.value = res.hasNextPage
}
const pageNum = ref(1)
const pageSize = ref(10)
const changetext = (e: any) => {
    shake(() => {
        hasNextPage.value = true
        pageNum.value = 1
        companylist.value = []
        getcompany()
    }, 300)
}
const hasNextPage = ref(true)
const sure = (id: number | string, companyname: string) => {
    let pages = getCurrentPages()
    let nowPage = pages[pages.length - 1]; //当前页页面实例
    let prevPage = pages[pages.length - 2]; //上一页页面实例
    console.log(prevPage)
    prevPage.$vm.value = { id: id, name: companyname }
    uni.navigateBack({
        delta: 1
    })
}
onReachBottom(() => {
    if (!hasNextPage.value) {
        uni.showToast({
            title: "暂无更多数据",
            icon: "none"
        })
    } else {
        pageNum.value += 1
        getcompany()
    }
})
</script>
<style lang="scss" scoped>
.mr {
    margin-right: 16rpx;
}

.box {
    background-color: #FAFAFC;
    min-height: 97vh;
    padding: 32rpx 32rpx 160rpx;

    .contentbox {
        width: 100%;
        box-sizing: border-box;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        background-color: #FFFFFF;
        margin-top: 24rpx;

        .personlistitem {
            width: 100%;
            box-sizing: border-box;
            padding: 24rpx;
            display: flex;
            align-items: center;

            .personcheck {
                margin-right: 20rpx;

                .img {
                    width: 64rpx;
                    height: 64rpx;
                }
            }

            .personinfo {
                flex: 1;
                font-size: 32rpx;
            }

        }

        .choosemsginfo {
            width: 100%;
            box-sizing: border-box;
            height: 114rpx;
            display: flex;
            align-items: center;
            padding: 32rpx;
            font-size: 24rpx;

            .blue {
                color: #5370F4;
            }
        }
    }

    .searchbox {
        width: 100%;
        box-sizing: border-box;
        height: 84rpx;
        background-color: #FFFFFF;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        position: relative;

        .image {
            position: absolute;
            left: 20rpx;
            top: 28rpx;
            width: 28rpx;
            height: 28rpx;
        }

        .input {
            padding-left: 60rpx;
            box-sizing: border-box;
            width: 100%;
            height: 100%;
        }
    }
}

.linebox {
    width: 100%;
    box-sizing: border-box;
    padding: 0 32rpx;

    .line {
        box-sizing: border-box;
        background-color: #F4F4F7;
        height: 0.5rpx;
        opacity: .5;
    }
}

.btnbox {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    box-sizing: border-box;
    height: 167rpx;
    background-color: #FFFFFF;
    padding: 12rpx 30rpx;

    .btn {
        box-sizing: border-box;
        height: 90rpx;
        line-height: 90rpx;
        text-align: center;
        background-color: #3E5FF5;
        border-radius: 44rpx 44rpx 44rpx 44rpx;
        color: #FFFFFF;
        font-size: 32rpx;
    }
}
</style>
